<template>
    <view class="my-module">
		<view class="setting">
			<u-icon name="setting" size="20" @click="goToEditPage"></u-icon>
		</view>
        <!-- 头部信息区域 -->
        <view class="header-info">
            <!-- 头像 -->
            <u-avatar
                :src="userInfo.avatar_url"
                :size="80"
                shape="circle"
                >
            </u-avatar>
            <!-- 用户名 -->
            <view class="username">{{ userInfo.username }}</view>
			<u-tag :text="userInfo.role.role_name" type="success" plain plainFill></u-tag>
        </view>
		
		<view class="remaining-counts">
			<view class="title">今日剩余免费次数</view>
			<view class="count">{{ system_config.operation_limit - today_operation_count }}</view>
		</view>
		<view class="remaining-counts" 
		  style="background: linear-gradient(135deg, #f9a8d4, #f57fc9, #ee52b9)">
			<view class="title">今日剩余无水印下载次数</view>
			<view class="count">{{ system_config.download_limit - today_download_count }}</view>
		</view>
		<use-count></use-count>
		<!-- <StatChartComponent></StatChartComponent> -->
        <!-- 退出登录按钮 -->
        <u-button @click="logout" type="default" size="large" shape="circle">退出登录</u-button>
    </view>
</template>

<script>
import UseCount from './components/UseCount/UseCount.vue'
// import StatChartComponent from './components/StatChart.vue'
import { mapState } from 'vuex'
import { getUserTodayCount } from '../../api/user.js'
export default {
	components: {
		UseCount,
		// StatChartComponent,
	},
    data() {
        return {
            system_config: {
				operation_limit: 0,
				download_limit: 0,
			},
			today_download_count: 0,
			today_operation_count: 0,
        };
    },
	beforeMount() {
		// this.fetchUserTodayCount()
	},
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo,
		})
	},
    methods: {
        // 跳转到修改用户信息页面
        goToEditPage() {
            uni.navigateTo({
                url: '/pages/userEdit/userEdit'
            });
        },
		fetchUserTodayCount() {
			getUserTodayCount().then(res=>{
				if(res.code==200) {
					const data = res.data;
					this.system_config = data.systemConfig;
					this.today_download_count = data.today_download_count;
					this.today_operation_count = data.today_operation_count;
				}
			})
		},
        // 退出登录
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 这里可以添加退出登录的逻辑，如清除本地存储的用户信息等
                        uni.redirectTo({
                            url: '/pages/Login/Login'
                        });
                    }
                }
            });
        },
		
		
    }
};
</script>

<style lang="scss">
.my-module {
    padding: 20px;
    display: flex;
    flex-direction: column;
	.setting {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

  .header-info {
	  width: 100%;
	  display: flex;
      margin-bottom: 20px;
	  align-items: center;

      .username {
            font-size: 20px;
            font-weight: bold;
            color: #333;
			margin: 0 10px;
        }
    }

  .remaining-counts {
		 background: linear-gradient(
				  135deg,
				  #5e42ec,
				  #9180ff,
				  #745dff
				); 
		width: 100%;
		padding: 10px 0;
		border-radius: 10px;
		color: #fff;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		box-shadow: 0 2px 12px 0 raba(0,0,0,0.1);
		.title {
			font-size: 12px;
			padding-left: 10px;
		}
		.count {
			font-size: 24px;
			padding-left: 10px;
		}
    }
	
	.u-button {
	    width: 100%;
	    max-width: 400px;
	    margin-top: 10px;
	    font-size: 18px;
	    letter-spacing: 1px;
	    transition: all 0.3s ease;
		border: 1px solid #f2e2e2;
	
	    &:hover {
	        transform: scale(1.02);
	    }
	}
}
</style>    